<template>
	<view 
		class="head"
		:style="{
			backgroundColor:bg_color,
		}">
		<view class="status_bar" 
			:style="{
				width:system_info.system_info.windowWidth+'px',
				height:system_info.head.status_bar_height+'px',
			}">
		</view>
		<view class="head_content" 
			:style="{
				height:system_info.head.navigation_bar_height+'px',
				width:system_info.system_info.windowWidth+'px',
				paddingRight:system_info.system_info.windowWidth - system_info.menu_button.left + 'px',				
			}">
			<view class="return_bt">
				<Page_return :color="color"></Page_return>
			</view>
			<view 
				class="centre"
				:style="{
					color:color,
				}">
				{{text}}
			</view>
		</view>
	</view>
</template>

<script>
import {_get_system_info} from "@/my_tools/tools.js"
import Page_return from "@/components/my_components/my_bt/page_return.vue" 
export default{  //简单的head组件，只包含返回按钮和title
	name:"Wzg_simple_head",
	components:{Page_return},
	props:{
		bg_color:{  //head组件背景颜色
			type:String, 
			default:'#000000',
		},
		color:{  //head组件字体颜色
			type:String, 
			default:'#ffffff',
		},
		text:{
			type:String,
			default:'新建项目',
		},
	},
	data(){
		return{
			system_info:null,
		}
	},
	methods:{
	},
	created(){
		this.system_info = _get_system_info(uni);
	},
}
</script>

<style lang="scss" scoped>
.head{
	width: 100vw;
	height:fit-content;
	>div{
		width: 100vw;
	}
	.head_content{
		padding-left:5px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.return_bt{
			margin-right: 5px;
		}
		.centre{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			font-size: 20px;
		}
	}
}
</style>
